<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <img src="/static/fylog1d.png" alt="医院Logo" class="logo">
        <h2>柳州市妇幼保健院</h2>
        <h4>退费审核管理系统</h4>
      </div>
      
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="mb-3">
          <label for="username" class="form-label">用户名</label>
          <div class="input-group">
            <span class="input-group-text"><i class="bi bi-person"></i></span>
            <input 
              type="text" 
              class="form-control" 
              id="username" 
              v-model="form.username"
              required 
              autocomplete="username"
              :disabled="authStore.loading"
            >
          </div>
        </div>
        
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <div class="input-group">
            <span class="input-group-text"><i class="bi bi-lock"></i></span>
            <input 
              :type="showPassword ? 'text' : 'password'" 
              class="form-control" 
              id="password" 
              v-model="form.password"
              required 
              autocomplete="current-password"
              :disabled="authStore.loading"
            >
            <button 
              class="btn btn-outline-secondary" 
              type="button" 
              @click="togglePassword"
              :disabled="authStore.loading"
            >
              <i :class="showPassword ? 'bi bi-eye-slash' : 'bi bi-eye'"></i>
            </button>
          </div>
        </div>
        
        <button 
          type="submit" 
          class="btn btn-primary w-100 login-btn"
          :disabled="authStore.loading"
        >
          <span v-if="authStore.loading" class="spinner-border spinner-border-sm me-2" role="status"></span>
          <i v-else class="bi bi-box-arrow-in-right me-2"></i>
          {{ authStore.loading ? '登录中...' : '登录' }}
        </button>
      </form>
      
      <div v-if="errorMessage" class="alert alert-danger mt-3">
        {{ errorMessage }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const form = ref({
  username: '',
  password: ''
})

const showPassword = ref(false)
const errorMessage = ref('')

const togglePassword = () => {
  showPassword.value = !showPassword.value
}

const handleLogin = async () => {
  errorMessage.value = ''
  
  if (!form.value.username || !form.value.password) {
    errorMessage.value = '请输入用户名和密码'
    return
  }
  
  const result = await authStore.login({
    username: form.value.username,
    password: form.value.password
  })
  
  console.log('登录结果:', result)
  console.log('认证状态:', authStore.isAuthenticated)
  
  if (result.success) {
    console.log('准备跳转到首页')
    router.push('/')
  } else {
    errorMessage.value = result.message || '登录失败'
  }
}

// 组件挂载时初始化认证状态
onMounted(() => {
  authStore.initAuth()
})
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.login-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 40px;
  width: 100%;
  max-width: 400px;
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-header .logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  border-radius: 50%;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.login-header h2 {
  color: #212529;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1.5rem;
}

.login-header h4 {
  color: #6c757d;
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 0;
}

.login-form .form-label {
  font-weight: 500;
  color: #212529;
  margin-bottom: 8px;
}

.login-form .form-control {
  border-radius: 8px;
  border: 1px solid #dee2e6;
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.15s ease-in-out;
}

.login-form .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.login-form .input-group-text {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px 0 0 8px;
  color: #6c757d;
}

.login-btn {
  padding: 12px 24px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.15s ease-in-out;
  margin-top: 20px;
}

.login-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>